﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>生产准备看板</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <link rel="stylesheet" href="../StaticFiles/layui/admin.css" />
  <link rel="stylesheet" href="../styles/pace.css" />
  <script type="text/javascript" src="../Scripts/pace.min.js"></script>
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
      background-repeat: no-repeat;
    }

    .layui-card {
      background-color: transparent;
      border: 1px dashed #1E9FFF;
    }

    .layui-card-header {
      color: #fff;
      border: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
    }

    .layui-table-cell {
      text-align: center;
    }

    /*左上图片*/
    .bg-left-top {
      position: absolute;
      left: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-top.png);
    }

    /*左下图片*/
    .bg-left-bottom {
      position: absolute;
      left: -2px;
      bottom: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-bottom.png);
    }

    /*右上图片*/
    .bg-right-top {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-top.png);
    }

    /*右下图片*/
    .bg-right-bottom {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-bottom.png);
    }

    .lable {
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      padding: 10px;
    }

    .yfycq {
      font-size: 40px;
      color: yellow;
      font-weight: bold;
      margin: 20px;
      cursor: pointer;
    }

    .yfcq {
      font-size: 40px;
      color: red;
      font-weight: bold;
      margin: 20px;
      cursor: pointer;
    }

    .layui-table-view th {
      font-weight: bold;
      font-size: 16px;
      text-align: center;
      color: #009688;
    }

    .layui-layer-title {
      text-align: center;
      font-weight: bold;
      font-size: 18px !important;
      color: #009688 !important;
    }
  </style>
</head>

<body>
  <!--[if lt IE 9]>
        <script src="../Scripts/pollyfills/es5-shim.min.js"></script>
        <script src="../Scripts/pollyfills/es5-sham.min.js"></script>
        <script src="../Scripts/pollyfills/html5.js"></script>
        <script src="../Scripts/pollyfills/response.js"></script>
    <![endif]-->
  <div class="layui-row" style="padding: 10px 15px;">
    <div class="layui-col-md3">
      <div>
        <img src="../images/aeec_logo.png" alt="" height="60" />
      </div>
    </div>
    <div class="layui-col-md6" style="height: 60px; line-height: 60px; text-align: center;
            font-size: 40px; letter-spacing: 0.1em; color: #fff;">
      装配厂生产准备看板
    </div>
    <div class="layui-col-md3" style="height: 60px; line-height: 60px; text-align: right;
            font-size: 16px; font-weight: bold; color: #fff;" id="currentTime">
    </div>
  </div>
  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/配套.png" height="30" alt="" />
            本月各机型齐套率
          </div>
          <div class="layui-card-body">
            <div id="productFamilyBar" style="height: 250px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/标准.png" height="30" alt="" />
            标准样件
          </div>
          <div class="layui-card-body">
            <div id="bzyjWBar" style="height: 250px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/油.png" height="26" alt="" />
            油封预警
          </div>
          <div class="layui-card-body">
            <div class="layui-row layui-col-space5" id="youfeng">
              <div class="layui-col-md4">
                <div class="layui-card" style="border: none;">
                  <div class="layui-card-header">
                  </div>
                  <div class="layui-card-body">
                    <div class="layui-row">
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/预计.png" height="30" alt="" />
                        <h3 class="lable">预超期</h3>
                        <p class="yfycq">0</p>
                      </div>
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/超期.png" height="30" alt="" />
                        <h3 class="lable">超期</h3>
                        <p class="yfcq">0</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4">
                <div class="layui-card" style="border: none;">
                  <div class="layui-card-header">
                  </div>
                  <div class="layui-card-body">
                    <div class="layui-row">
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/预计.png" height="30" alt="" />
                        <h3 class="lable">预超期</h3>
                        <p class="yfycq">0</p>
                      </div>
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/超期.png" height="30" alt="" />
                        <h3 class="lable">超期</h3>
                        <p class="yfcq">0</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4">
                <div class="layui-card" style="border: none;">
                  <div class="layui-card-header">
                  </div>
                  <div class="layui-card-body">
                    <div class="layui-row">
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/预计.png" height="30" alt="" />
                        <h3 class="lable">预超期</h3>
                        <p class="yfycq">0</p>
                      </div>
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/超期.png" height="30" alt="" />
                        <h3 class="lable">超期</h3>
                        <p class="yfcq">0</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/设备.png" height="28" alt="" />
            设备预警
          </div>
          <div class="layui-card-body">
            <div class="layui-row layui-col-space5" id="shebei">
              <div class="layui-col-md4">
                <div class="layui-card" style="border:none;">
                  <div class="layui-card-header">
                  </div>
                  <div class="layui-card-body">
                    <div class="layui-row">
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/预计.png" height="30" alt="" />
                        <h3 class="lable">预超期</h3>
                        <p class="yfycq">0</p>
                      </div>
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/超期.png" height="30" alt="" />
                        <h3 class="lable">超期</h3>
                        <p class="yfcq">0</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4">
                <div class="layui-card" style="border:none;">
                  <div class="layui-card-header">
                  </div>
                  <div class="layui-card-body">
                    <div class="layui-row">
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/预计.png" height="30" alt="" />
                        <h3 class="lable">预超期</h3>
                        <p class="yfycq">0</p>
                      </div>
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/超期.png" height="30" alt="" />
                        <h3 class="lable">超期</h3>
                        <p class="yfcq">0</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4">
                <div class="layui-card" style="border:none;">
                  <div class="layui-card-header">
                  </div>
                  <div class="layui-card-body">
                    <div class="layui-row">
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/预计.png" height="30" alt="" />
                        <h3 class="lable">预超期</h3>
                        <p class="yfycq">0</p>
                      </div>
                      <div class="layui-col-md6" style="text-align: center;">
                        <img src="../images/超期.png" height="30" alt="" />
                        <h3 class="lable">超期</h3>
                        <p class="yfcq">0</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/工具.png" height="26" alt="" />
            工装工具
          </div>
          <div class="layui-card-body">
            <div id="toolsChart" style="height: 240px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
  <script type="text/javascript">
    $(function () {
      $(".layui-card:last-child").css({ "marginBottom": "0px" });
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
      };
      var $factoryid = getUrlParam('factoryid');

      // 页面右上方时钟
      function showTime() {
        var currentTime = new Date();
        var year = currentTime.getFullYear();
        var month = currentTime.getMonth() + 1;
        var date = currentTime.getDate();
        var day = currentTime.getDay();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var time = document.getElementById("currentTime");
        if (seconds < 10) {
          seconds = "0" + seconds;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        time.innerHTML = year + "年" + month + "月" + date + "日   " + hours + " : " + minutes + " : " + seconds;
      };
      setInterval(showTime, 500);

      layui.use(['layer', 'table'], function () {
        var table = layui.table;
        var layer = layui.layer;

        //弹出层通用方法
        function openDialog(config) {
          layer.open({
            title: config.title,
            type: 1,
            content: "<table class='layui-hide' id='test'></table>",
            area: ['100%', '100%'],
            skin: 'layui-layer-rim',
            success: function (layero) {
              table.render({
                elem: '#test',
                url: config.url,
                method: config.method,
                cols: config.cols,
                where: config.QueryString,
                request: {
                  pageName: 'page', //页码的参数名称，默认：page
                  limitName: 'rows' //每页数据量的参数名，默认：limit
                },
                cellMinWidth: 80,
                page: {
                  theme: '#1E9FFF'
                },
                text: {
                  none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
              });
            }
          });
        };

        //各机型齐套情况
        function GetProductFamilyQitaoInfo() {
          $.ajax({
            type: "POST",
            url: "../handler/board/ZSWorkPrepareLookBoard.ashx?type=GetQiTaoLv",
            dataType: "text",
            cashe: false,
            beforeSend: function () {
              echarts.dispose(document.getElementById("productFamilyBar"));
              var productFamilyBar = echarts.init(document.getElementById('productFamilyBar'));
              productFamilyBar.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });
            },
            success: function (result) {
              var data = JSON.parse(result);

              echarts.dispose(document.getElementById("productFamilyBar"));
              var productFamilyBar = echarts.init(document.getElementById('productFamilyBar'));
              productFamilyBar.hideLoading();

              var arrQiTaoLv = []; //齐套率
              var arrNotQiTaoLv = []; //未齐套率
              var arrProductfamily = []; //机型
              var arrMarkPointData = []; //图形标注

              for (var i = 0; i < data.length; i++) {
                arrQiTaoLv.push(parseFloat(data[i]["qitaolv"]));
                arrProductfamily.push(data[i]["PRODUCTFAMILYNAME"]);
              };

              for (var i = 0; i < arrQiTaoLv.length; i++) {
                arrNotQiTaoLv.push(100 - arrQiTaoLv[i]); //计算未齐套率：100-齐套率 = 未齐套率
                arrMarkPointData.push({
                  value: arrQiTaoLv[i],
                  xAxis: i,
                  yAxis: 100,
                  itemStyle: {
                    color: '#00FF00'
                  }
                });
              };

              var option = {
                grid: {
                  left: '3%',
                  right: '3%',
                  bottom: '3%',
                  containLabel: true
                },
                xAxis: [{
                  type: 'category',
                  data: arrProductfamily,
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  }
                }],
                yAxis: [{
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisLabel: {
                    show: true,
                    formatter: function (data) {
                      return data + "%";
                    },
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  }
                }],
                series: [{
                  name: '齐套率',
                  type: 'bar',
                  barMaxWidth: 40,
                  data: arrQiTaoLv,
                  stack: '总数',
                  itemStyle: {
                    normal: {
                      borderStyle: 'solid',
                      borderWidth: 2,
                      borderColor: '#fff',
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '14',
                        fontWeight: 'bold',
                        formatter: '{c}%'
                      },
                      color: '#00FF00'
                    }
                  }
                }, {
                  name: '未齐套率',
                  type: 'bar',
                  barMaxWidth: 40,
                  stack: '总数',
                  data: arrNotQiTaoLv,
                  itemStyle: {
                    normal: {
                      borderStyle: 'solid',
                      borderWidth: 2,
                      borderColor: '#fff',
                      label: {
                        show: false
                      },
                      color: 'transparent',
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  },
                  markPoint: {
                    //symbol: ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'],
                    symbol: 'none',
                    symbolSize: 65,
                    animation: true,
                    data: arrMarkPointData,
                    label: {
                      formatter: '{c}%',
                      fontSize: '10'
                    }
                  }
                }]
              };

              productFamilyBar.setOption(option);
              productFamilyBar.on('click', function (params) {
                var config = {};
                config.QueryString = { productfamilyname: params.name, type: "GetQiTaoLvDetails" };
                config.url = "../handler/board/ZSWorkPrepareLookBoard.ashx";
                config.title = params.name + "--各发动机未配套物料明细";
                config.method = "post";
                config.cols = [[
                  { type: 'numbers', title: '序号', width: 80 },
                  { field: 'PRODUCTFAMILYNAME', title: '机型' },
                  { field: 'ATTRIBUTEVALUE', title: '发动机号' },
                  { field: 'MFGORDERNAME', title: '订单号' },
                  { field: 'PRODUCTNAME', title: '件号' },
                  { field: 'DESCRIPTION', title: '名称' },
                  { field: 'QTYREQUIRED', title: '需求数' },
                  { field: 'FALIAOQTY', title: '实发数' },
                  {
                    field: 'STATUS', title: '状态', style: 'color:#fff;',
                    templet: function (d) {
                      if (d.STATUS == '未发料') {
                        return '<span style="background-color: #FF5722;padding:5px;">' + d.STATUS + '</span>'
                      } else {
                        return '<span style="background-color: #5FB878;padding:5px;">' + d.STATUS + '</span>'
                      }
                    }
                  }
                ]];
                openDialog(config);
              })
            }
          });
        };
        GetProductFamilyQitaoInfo();

        //标准样件
        function GetBZYJData() {
          $.ajax({
            type: "GET",
            url: "../handler/board/ZSWorkPrepareLookBoard.ashx?type=GetBZYJData",
            dataType: "text",
            cashe: false,
            beforeSend: function () {
              echarts.dispose(document.getElementById("bzyjWBar"));
              var bzyjWBar = echarts.init(document.getElementById('bzyjWBar'));
              bzyjWBar.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });
            },
            success: function (data) {
              var obj = JSON.parse(data);

              if (obj.length < 1) {
                $("#bzyjWBar").empty().append("<div class='content'>标准样件--暂无数据</div>");
                return;
              };

              var arrProductfamily = [];
              var arrTotal = [];
              var arrDual = [];

              for (var i = 0; i < obj.length; i++) {
                arrProductfamily.push(obj[i]["PRODUCTFAMILY"]);
                arrTotal.push(obj[i]["TOTAL"]);
                arrDual.push(obj[i]["DUAL"]);
              };

              echarts.dispose(document.getElementById("bzyjWBar"));
              var bzyjWBar = echarts.init(document.getElementById('bzyjWBar'));

              bzyjWBar.hideLoading();

              var bzyjWBarOption = {
                tooltip: {
                  trigger: 'axis',
                  show: false,
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                grid: {
                  left: '3%',
                  right: '3%',
                  bottom: '3%',
                  containLabel: true
                },
                legend: {
                  data: ['总数', '即将到期'],
                  x: '10',
                  y: '10',
                  textStyle: {
                    fontSize: '12',
                    fontWeight: 'bold',
                    color: '#fff'
                  }
                },
                color: ['#00BFFF', 'red', 'green'],
                xAxis: [{
                  type: 'category',
                  data: arrProductfamily,
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  }
                }],
                yAxis: [{
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  },
                  splitLine: {
                    show: false,
                    lineStyle: {
                      color: '#999',
                      type: 'dashed'
                    }
                  }
                }],
                series: [{
                  name: '总数',
                  type: 'bar',
                  barMaxWidth: 35,
                  data: arrTotal,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }, {
                  name: '即将到期',
                  type: 'bar',
                  data: arrDual,
                  barMaxWidth: 35,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }]
              };

              bzyjWBar.on('click', function (params) {
                var queryType;
                if (params.seriesName === "总数") {
                  queryType = "total";
                } else {
                  queryType = "dual";
                }
                var config = {};
                config.QueryString = { productfamily: params.name, queryType: queryType, type: "GetBZYJDetails" };
                config.url = "../handler/board/ZSWorkPrepareLookBoard.ashx";
                config.title = "标准样件--" + params.name + params.seriesName + "明细";
                config.method = "post";
                config.cols = [[
                  { type: 'numbers', title: '序号', width: 80 },
                  { field: 'ETALONBASEDATANO', title: '编号' },
                  { field: 'ETALONTYPE', title: '类型' },
                  { field: 'PRODUCTNAME', title: '零件图号' },
                  { field: 'PRODUCTDESC', title: '零件名称' },
                  { field: 'PRODUCTFAMILY', title: '型别' },
                  { field: 'ETALONCONTENT', title: '标准样件内容' },
                  { field: 'STEPINFO', title: '适用工序' },
                  {
                    field: 'BEGINDATE', title: '开始时间',
                    templet: function (d) {
                      if (d.BEGINDATE === null) {
                        return "";
                      } else {
                        return d.BEGINDATE.split('T')[0];
                      }
                    }
                  },
                  {
                    field: 'FINISHDATE', title: '到期时间',
                    templet: function (d) {
                      if (d.FINISHDATE === null) {
                        return "";
                      } else {
                        return d.FINISHDATE.split('T')[0];
                      }
                    }
                  }
                ]];
                openDialog(config);
              });
              bzyjWBar.setOption(bzyjWBarOption);
            }
          });
        };
        GetBZYJData();

        //油封预警
        function GetOilInfo() {
          $.ajax({
            type: "POST",
            url: "../handler/board/ZSWorkPrepareLookBoard.ashx?type=GetOilInfo",
            dataType: "text",
            cashe: false,
            data: {
              factoryid: $factoryid
            },
            beforeSend: function () {

            },
            success: function (result) {
              var data = JSON.parse(result);
              for (var i = 0; i < data.length; i++) {
                $("#youfeng .layui-card-header").eq(i).text(data[i]["title"]).attr("title", data[i]["WORKCENTERNAME"]);
                $("#youfeng .layui-card-body").eq(i).find("p.yfycq").eq(0).text(data[i]["YCQ"]);
                $("#youfeng .layui-card-body").eq(i).find("p.yfcq").eq(0).text(data[i]["DELAY"]);
              };

              $("#youfeng p").each(function () {
                var _this = $(this);
                var className = _this.attr("class");
                var workcentername = _this.parent().parent().parent().parent().find(".layui-card-header").eq(0).attr("title");
                _this.on('click', function (e) {
                  if (_this.text() === "0") {
                    layer.alert('暂无数据', { icon: 7, title: "提示" });
                    return;
                  } else {
                    var queryType;
                    if (className === "yfycq") {
                      queryType = "预超期";
                    } else {
                      queryType = "超期";
                    }
                    var config = {};
                    config.QueryString = { workcentername: workcentername, queryType: queryType, type: "GetOilDetailsInfo" };
                    config.url = "../handler/board/ZSWorkPrepareLookBoard.ashx";
                    config.title = "油封预警--" + workcentername + "--" + queryType + "明细";
                    config.method = "post";
                    config.cols = [[
                      { type: 'numbers', title: '序号', width: 80 },
                      { field: 'OILTYPE', title: '油封类型' },
                      { field: 'STATUS', title: '油封状态' },
                      { field: 'ENGINENO', title: '发动机号' },
                      {
                        field: 'STARTDATE', title: '油封开始时间',
                        templet: function (d) {
                          if (d.STARTDATE === null) {
                            return "";
                          } else {
                            return d.STARTDATE.split('T')[0];
                          }
                        }
                      },
                      {
                        field: 'ENDDATE', title: '油封结束时间',
                        templet: function (d) {
                          if (d.ENDDATE === null) {
                            return "";
                          } else {
                            return d.ENDDATE.split('T')[0];
                          }
                        }
                      },
                      { field: 'LOCATIONNAME', title: '保存地点' },
                      { field: 'OILSEALCYCLE', title: '油封期' },
                      { field: 'FULLNAME', title: '操作工' },
                      { field: 'QTY', title: '油封数量' },
                      { field: 'PRODUCTNAME', title: '件号' },
                      { field: 'DESCRIPTION', title: '名称' },
                      { field: 'PRODUCTBATCHNO', title: '批次' },
                      { field: 'ISJZ', title: '是否假装' },
                      { field: 'TYPE', title: '类型' },
                      { field: 'NOTES', title: '备注' }
                    ]];
                    openDialog(config);
                  }
                });
              });
            }
          });
        };
        GetOilInfo();

        //设备预警
        function GetToolsInfo() {
          $.ajax({
            type: "POST",
            url: "../handler/board/ZSWorkPrepareLookBoard.ashx?type=GetTools",
            dataType: "text",
            cashe: false,
            data: {
              factoryid: $factoryid
            },
            success: function (result) {
              var data = JSON.parse(result);

              for (var i = 0; i < data.length; i++) {
                $("#shebei .layui-card-header").eq(i).text(data[i]["title"]).attr("title", data[i]["WORKCENTERNAME"]);
                $("#shebei .layui-card-body").eq(i).find("p.yfycq").eq(0).text(data[i]["YCQ"]);
                $("#shebei .layui-card-body").eq(i).find("p.yfcq").eq(0).text(data[i]["DELAY"]);
              };

              $("#shebei p").each(function () {
                var _this = $(this);
                var className = _this.attr("class");
                var workcentername = _this.parent().parent().parent().parent().find(".layui-card-header").eq(0).attr("title");

                _this.on('click', function (e) {
                  if (_this.text() === "0") {
                    layer.alert('暂无数据', { icon: 7, title: "提示" });
                    return;
                  } else {
                    var queryType;
                    if (className === "yfycq") {
                      queryType = "预超期";
                    } else {
                      queryType = "超期";
                    }
                    var config = {};
                    config.QueryString = { workcentername: workcentername, queryType: queryType, type: "GetToolsDetailsInfo" };
                    config.url = "../handler/board/ZSWorkPrepareLookBoard.ashx";
                    config.title = "设备预警--" + workcentername + "--" + queryType + "明细";
                    config.method = "post";
                    config.cols = [[
                      { type: 'numbers', title: '序号', width: 80 },
                      { field: 'EQUNR', title: '设备编码' },
                      { field: 'EQKTX', title: '设备名称' },
                      { field: 'BEGRU', title: '资产管理部门' },
                      { field: 'GROES', title: '规格' },
                      { field: 'TYPBZ', title: '型号' },
                      { field: 'ZYXQ', title: '有效期' },
                      { field: 'ZJDBM', title: '定检部门' },
                      {
                        field: 'ZJDRQ', title: '定检日期',
                        templet: function (d) {
                          if (d.ZJDRQ === null) {
                            return "";
                          } else {
                            return d.ZJDRQ.split('T')[0];
                          }
                        }
                      },
                      { field: 'ZJDZQ', title: '检定周期' },
                      { field: 'ZZQDJ', title: '精度等级' }
                    ]];
                    openDialog(config);
                  }
                });
              });
            }
          });
        };
        GetToolsInfo();

        //工装工具
        function GetTools() {
          $.ajax({
            type: "GET",
            url: "../handler/board/ZSWorkPrepareLookBoard.ashx?type=GetToolPrepInfo",
            dataType: "text",
            cashe: false,
            beforeSend: function () {
              echarts.dispose(document.getElementById("toolsChart"));
              var chart = echarts.init(document.getElementById('toolsChart'));
              chart.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });
            },
            success: function (result) {
              var data = JSON.parse(result);

              echarts.dispose(document.getElementById("toolsChart"));
              var chart = echarts.init(document.getElementById('toolsChart'));
              chart.hideLoading();

              var arrProductFamily = [];
              var arrTotal = [];
              var arrYCQ = [];
              var arrCQ = [];

              for (var i = 0; i < data.length; i++) {
                arrProductFamily.push(data[i]["ZXHAO"]);
                arrTotal.push(data[i]["TOTAL"]);
                arrYCQ.push(data[i]["YCQ"]);
                arrCQ.push(data[i]["DELAY"]);
              };

              var option = {
                tooltip: {
                  trigger: 'axis',
                  show: false,
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                grid: {
                  left: '3%',
                  right: '3%',
                  bottom: '3%',
                  containLabel: true
                },
                legend: {
                  data: ['总数', '预超期', '超期'],
                  x: '10',
                  y: '10',
                  textStyle: {
                    fontSize: '12',
                    fontWeight: 'bold',
                    color: '#fff'
                  }
                },
                color: ['#00BFFF', 'yellow', 'red'],
                xAxis: [{
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '1'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    },
                    formatter: function (params) {
                      if (params.indexOf("、") === -1) {
                        return params;
                      } else {
                        var arrProductFamilyList = params.split("、");
                        var strReturn = "";
                        for (var i = 0; i < arrProductFamilyList.length; i++) {
                          if (i + 1 === arrProductFamilyList.length) {
                            strReturn += arrProductFamilyList[i];
                          } else if (i % 2 == 1) {
                            strReturn += arrProductFamilyList[i] + " , \n";
                          } else {
                            strReturn += arrProductFamilyList[i] + " , ";
                          }
                        }
                        return strReturn;
                      }
                    }
                  },
                  data: arrProductFamily
                }],
                yAxis: [{
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '1'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  },
                  splitLine: {
                    show: false,
                    lineStyle: {
                      color: '#999',
                      type: 'dashed'
                    }
                  }
                }],
                series: [{
                  name: '总数',
                  type: 'bar',
                  barMaxWidth: 30,
                  data: arrTotal,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }, {
                  name: '预超期',
                  type: 'bar',
                  barMaxWidth: 30,
                  data: arrYCQ,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }, {
                  name: '超期',
                  type: 'bar',
                  barMaxWidth: 30,
                  data: arrCQ,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }]
              };

              chart.on('click', function (params) {
                var config = {};
                config.QueryString = { productfamilyname: params.name, queryType: params.seriesName, type: "GetToolPrepDetailsInfo" };
                config.url = "../handler/board/ZSWorkPrepareLookBoard.ashx";
                config.title = "工装工具--" + params.name + "--" + params.seriesName + "明细";
                config.method = "post";
                config.cols = [[
                  { type: 'numbers', title: '序号', width: 80 },
                  { field: 'MATNR', title: '物料' },
                  { field: 'SERNR', title: '工装编号' },
                  { field: 'VRPRC', title: '送检过程' },
                  { field: 'CHKTYP', title: '送检类别' },
                  {
                    field: 'VLDAT', title: '有效日期',
                    templet: function (d) {
                      if (d.VLDAT === null) {
                        return "";
                      } else {
                        return d.VLDAT.split('T')[0];
                      }
                    }
                  },
                  { field: 'PRUEFLOS', title: '检验批号' },
                  { field: 'PASSED', title: '检定结果' },
                  { field: 'MENGE', title: '数量' },
                  { field: 'KOSTL', title: '成本中心' },
                  { field: 'MAKTX', title: '物料描述' },
                  { field: 'ZXHAO', title: '型号' },
                  { field: 'ZEINR', title: '图号' },
                  { field: 'ZJDZQ', title: '检定周期' },
                  { field: 'LABST', title: '可用数量' },
                  { field: 'ZPOSITION', title: '存放位置' }
                ]];
                openDialog(config);
              });

              chart.setOption(option);
            }
          });
        }
        GetTools();
      });

    });
  </script>
</body>

</html>